<template>
	<z-paging ref="pagingRef" v-model="state.goodsList" @query="queryList">
		<template #top>
			<hx-navbar title="商品列表"> </hx-navbar>
		</template>
		<!-- 搜索框 -->
		<view class="u-padding-10 goods-search">
			<u-search style="flex: 1" bg-color="#fff" v-model="state.queryParams.name" @focus="toSearch" :show-action="false"></u-search>
			<u-icon class="u-padding-left-20 u-padding-right-20" :size="36" :name="layout ? 'grid' : 'list'" @click="layout = !layout"></u-icon>
		</view>
		<!-- 商品列表 -->
		<view class="goods-container">
			<view class="goods-nav">
				<view class="item" :class="filterParam.recommend ? 'item-selected' : ''" @click="sortHandler('default')">综合推荐 </view>
				<view class="item" :class="filterParam.salesVolume ? 'item-selected' : ''" @click="sortHandler('sales')">销量 </view>
				<view class="item" @click="sortHandler('price')">
					<text :class="filterParam.price ? 'item-selected' : ''"> 价格 </text>
					<view class="price-icon">
						<u-icon :color="filterParam.price == 'asc' ? '#2979ff' : 'inherit'" name="arrow-up-fill" size="12"></u-icon>
						<u-icon :color="filterParam.price == 'desc' ? '#2979ff' : 'inherit'" name="arrow-down-fill" size="12"></u-icon>
					</view>
				</view>
				<view class="item" :class="filterParam.newGoods ? 'item-selected' : ''" @click="sortHandler('newGoods')">新品 </view>
			</view>
			<view class="product-list">
				<view class="product-list-content">
					<view :class="layout ? 'product-item' : 'product-item-row'" v-for="(item, index) in state.goodsList" :key="index" @click="toDetail(item.id)">
						<image :src="item.spuUrls[0]" />
						<view class="item-warp">
							<view class="title u-line-2"> {{ item.name }} </view>
							<view class="sub-title u-line-2" v-if="item.subTitle"> {{ item.subTitle }} </view>
							<view class="item-bottom">
								<view class="price text-price">
									{{ item.salesPrice }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getPage } from '@/api/product/spu';

interface FilterParam {
	salesVolume: boolean;
	price: string;
	newGoods: boolean;
	recommend: boolean;
}
interface State {
	queryParams: {
		name: string;
		categorySecondId: string;
	};
	goodsList: Array<any>;
	page: {
		desc: string;
		asc: string;
	};
}
// 定义变量
const pagingRef = ref<ZPagingInstance>();

// 布局： true 纵向布局 false:横向布局
const layout = ref(true);
const filterParam = reactive<FilterParam>({
	salesVolume: false,
	price: '',
	newGoods: false,
	recommend: true,
});
const state = reactive<State>({
	queryParams: {
		name: '',
		categorySecondId: '',
	},
	goodsList: [],
	page: {
		desc: '',
		asc: '',
	},
});
onLoad((options) => {
	state.queryParams.name = options?.keyword;
	state.queryParams.categorySecondId = options?.categoryId;
});
// 排序
const sortHandler = (val: string) => {
	state.page.desc = '';
	state.page.asc = '';
	switch (val) {
		case 'sales':
			filterParam.price = '';
			filterParam.newGoods = false;
			filterParam.recommend = false;
			filterParam.salesVolume = !filterParam.salesVolume;
			state.page.desc = 'sales_volume';
			break;
		case 'price':
			filterParam.salesVolume = false;
			filterParam.newGoods = false;
			filterParam.recommend = false;
			if (filterParam.price == 'asc') {
				filterParam.price = 'desc';
				state.page.desc = 'sales_price';
			} else {
				state.page.asc = 'sales_price';
				filterParam.price = 'asc';
			}
			break;
		case 'newGoods':
			filterParam.salesVolume = false;
			filterParam.recommend = false;
			filterParam.price = '';
			filterParam.newGoods = !filterParam.newGoods;
			state.page.desc = 'create_time';
			break;
		case 'default':
			filterParam.recommend = true;
			filterParam.price = '';
			filterParam.newGoods = false;
			filterParam.salesVolume = false;
			break;
	}
	pagingRef.value?.reload();
};
// 列表查询
const queryList: ZPagingEvent.Query = (pageNo: number, pageSize: number) => {
	getPage(
		Object.assign(
			{
				current: pageNo,
				size: pageSize,
			},
			state.queryParams,
			state.page
		)
	).then((response) => {
		pagingRef.value?.complete(response.data.records);
	});
};
// 跳转商品详情
const toDetail = (id: string) => {
	uni.$hxRouter.push({url:'/pages/product/goods-detail/index?id=' + id});
};
const toSearch = () => {
	uni.$hxRouter.push({rul:'/pages/product/goods-search/index?keyword=' + state.queryParams.name});
};
</script>

<style lang="scss">
.goods-search {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.goods-container {
	margin-top: 10rpx;
	margin-bottom: 20rpx;

	.goods-nav {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		height: 44px;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		color: rgb(106, 106, 106);
		background-color: rgb(255, 255, 255);
		font-size: 14px;
		overflow: hidden;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 2rpx;
			width: 100%;
			height: 1px;
			background-color: #f0f0f0;
		}

		.item {
			display: flex;
			align-items: center;
			position: relative;
		}
	}

	.product-list {
		padding: 20rpx;
		background: #fefefe;

		.product-list-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.product-item-row {
				display: flex;
				box-sizing: border-box;
				padding: 10px;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
				margin-bottom: 20rpx;
				width: 100%;

				image {
					flex: 0 0 calc(35% - 10rpx);
					width: 100%;
					height: 120px;
					display: block;
					margin-right: 20rpx;
					border-radius: 8rpx;
				}

				.item-warp {
					padding: 0%;
					flex: 1;
				}
			}

			.product-item {
				flex: 0 0 calc(50% - 10rpx);
				box-sizing: border-box;
				border-radius: 10rpx;
				padding: 10px;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 160px;
					display: block;
				}
			}
		}
	}
}

.item-warp {
	padding: 20rpx 0 0 0;

	.title {
		font-size: 14px;
	}

	.sub-title {
		margin-top: 8rpx;
		color: #909399;
		font-size: 12px;
	}

	.item-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-top: 10rpx;

		.price {
			color: red;
			font-size: 18px;
		}
	}
}

.item-selected {
	color: #2979ff;
}

.price-icon {
	display: flex;
	flex-direction: column;
	padding-left: 5rpx;
}
</style>
